<template>
  <a-card class="a-card">
    <template #title>
      <Icon icon="nav|svg" />
      {{ workbench('quickNav') }}
    </template>
    <div v-for="(item, index) in navItems" :key="index">
      <a-card-grid style="width: 33.333%; text-align: center" class="a-card-grid" @click="$router.push({ path: item.component })">
        <div class="icon-title">
          <Icon :icon="item.icon" :color="item.color" size="20" />
          <span>{{ item.title }}</span>
        </div>
      </a-card-grid>
      <!-- </router-link> -->
    </div>
  </a-card>
</template>
<script lang="ts" setup>
  import { navItems } from './data';
  import { Icon } from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t: workbench } = useI18n('dashboard.workbench');
  // const CardGrid = Card.Grid;
</script>
<style lang="less" scoped>
  .a-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    .a-card-grid {
      cursor: pointer;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
  // .ant-card-head-title {
  //   padding-top: 10px;
  // }
  // .title {
  //   display: block;
  // }

  :deep(.ant-card-body) {
    padding: 0;
  }
</style>
